<div class="experiment-home">
  <h1 class="page-heading">图书馆电商管理系统</h1>
  <div class="carousel-section">

    <nz-carousel [nzEffect]="'fade'" [nzAutoPlay]="true" [nzAutoPlaySpeed]="3000" [nzDots]="true"
      class="system-carousel">
      <div nz-carousel-content class="carousel-slide slide-overview">
        <div class="slide-content">
          <div class="slide-text">
            <div class="slide-badge">
              <i nz-icon nzType="star" nzTheme="fill"></i>
              <span>智慧图书馆</span>
            </div>
            <h2>现代化电商管理平台</h2>
            <div class="slide-features">
              <div class="feature-tag">
                <i nz-icon nzType="cpu"></i>
                <span>高性能架构</span>
              </div>
              <div class="feature-tag">
                <i nz-icon nzType="line-chart"></i>
                <span>大数据支持</span>
              </div>
              <div class="feature-tag">
                <i nz-icon nzType="mobile"></i>
                <span>响应式设计</span>
              </div>
            </div>
          </div>
          <div class="slide-visual">
            <div class="visual-icon main-icon">
              <i nz-icon nzType="read"></i>
            </div>
            <div class="floating-elements">
              <div class="floating-item" [ngStyle]="{'--delay': '0s'}">
                <i nz-icon nzType="file-text"></i>
              </div>
              <div class="floating-item" [ngStyle]="{'--delay': '0.5s'}">
                <i nz-icon nzType="shopping"></i>
              </div>
              <div class="floating-item" [ngStyle]="{'--delay': '1s'}">
                <i nz-icon nzType="ordered-list"></i>
              </div>
              <div class="floating-item" [ngStyle]="{'--delay': '1.5s'}">
                <i nz-icon nzType="menu"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div nz-carousel-content class="carousel-slide slide-features">
        <div class="slide-content">
          <div class="slide-text">
            <div class="slide-badge">
              <i nz-icon nzType="setting" nzTheme="fill"></i>
              <span>核心功能</span>
            </div>
            <h2>四大管理模块</h2>
            <div class="module-grid">
              <div class="module-item" (click)="navigate('books')">
                <i nz-icon nzType="file-text"></i>
                <span>图书目录</span>
              </div>
              <div class="module-item" (click)="navigate('dynamic-medium-list')">
                <i nz-icon nzType="redo"></i>
                <span>库存管理</span>
              </div>
              <div class="module-item" (click)="navigate('order-process')">
                <i nz-icon nzType="line-chart"></i>
                <span>订单处理</span>
              </div>
              <div class="module-item" (click)="navigate('book-catalog')">
                <i nz-icon nzType="menu"></i>
                <span>分类管理</span>
              </div>
            </div>
          </div>
          <div class="slide-visual">
            <div class="feature-showcase">
              <div class="showcase-item" *ngFor="let item of showcaseItems; let i = index"
                [ngStyle]="{'animationDelay': i * 0.3 + 's'}">
                <i nz-icon [nzType]="item.icon"></i>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div nz-carousel-content class="carousel-slide slide-tech">
        <div class="slide-content">
          <div class="slide-text">
            <div class="slide-badge">
              <i nz-icon nzType="cpu"></i>
              <span>技术优势</span>
            </div>
            <h2>Vue.js性能优化</h2>
            <div class="tech-stats">
              <div class="stat-item">
                <div class="stat-number">3种</div>
                <div class="stat-label">Key策略</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">1000+</div>
                <div class="stat-label">并发支持</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">99%</div>
                <div class="stat-label">性能优化</div>
              </div>
            </div>
          </div>
          <div class="slide-visual">
            <div class="tech-visual">
              <div class="code-window">
                <div class="window-header">
                  <div class="window-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <span class="window-title">performance.js</span>
                </div>
                <div class="window-content">
                  <div class="code-line">
                    <span class="keyword">const</span>
                    <span class="variable">strategy</span> =
                    <span class="string">'{{ currentStrategy }}'</span>
                  </div>
                  <div class="code-line">
                    <span class="keyword">if</span>
                    <span class="bracket">(</span>
                    <span class="variable">strategy</span>
                    <span class="operator">===</span>
                    <span class="string">'id'</span>
                    <span class="bracket">)</span>
                  </div>
                  <div class="code-line indent">
                    <span class="keyword">return</span>
                    <span class="variable">item.id</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div nz-carousel-content class="carousel-slide slide-cta">
        <div class="slide-content">
          <div class="slide-text">
            <div class="slide-badge">
              <i nz-icon nzType="like" nzTheme="fill"></i>
              <span>立即体验</span>
            </div>
            <h2>开始体验</h2>
            <div class="cta-buttons">
              <a [routerLink]="['/books']" nz-button nzType="primary" class="cta-button warning">
                <i nz-icon nzType="file-text"></i>
                <span>图书目录</span>
              </a>
              <a [routerLink]="['/book-catalog']" nz-button nzType="primary" class="cta-button primary">
                <i nz-icon nzType="menu"></i>
                <span>分类管理</span>
              </a>
              <a [routerLink]="['/order-process']" nz-button nzType="primary" class="cta-button success">
                <i nz-icon nzType="ordered-list"></i>
                <span>订单中心</span>
              </a>
            </div>
          </div>
          <div class="slide-visual">
            <div class="cta-visual">
              <div class="rocket-container">
                <div class="rocket">
                  <i nz-icon nzType="trophy" nzTheme="fill"></i>
                </div>
                <div class="stars">
                  <div class="star" *ngFor="let i of [1,2,3,4,5]" [ngStyle]="{'animationDelay': i * 0.2 + 's'}">
                    ✨
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nz-carousel>
  </div>


  <div class="key-strategy-section">
    <div class="section-header">
      <h3>
        <i nz-icon nzType="key" nzTheme="outline"></i>
        Key 策略选择
      </h3>
      <nz-tooltip nzTitle="不同的Key策略会影响Vue列表渲染的性能表现" nzPlacement="top">
        <nz-icon nzType="question-circle" nzTheme="outline" />
      </nz-tooltip>
    </div>

    <div class="strategy-card">
      <div class="strategy-options">
        <nz-radio-group class="radio-group" [(ngModel)]="currentStrategy"
          (ngModelChange)="handleStrategyChange($event)">
          <label nz-radio nzValue="id" class="radio-label">
            <div class="radio-content">
              <i nz-icon nzType="key" nzTheme="outline"></i>
              <div class="radio-text">
                <span class="primary-text">使用ID</span>
                <span class="secondary-text">使用数据的唯一标识作为key</span>
              </div>
            </div>
          </label>
          <label nz-radio nzValue="index" class="radio-label">
            <div class="radio-content">
              <i nz-icon nzType="sort-ascending" nzTheme="outline"></i>
              <div class="radio-text">
                <span class="primary-text">使用索引</span>
                <span class="secondary-text">使用数组索引作为key</span>
              </div>
            </div>
          </label>
          <label nz-radio nzValue="none" class="radio-label">
            <div class="radio-content">
              <i nz-icon nzType="close-circle" nzTheme="outline"></i>
              <div class="radio-text">
                <span class="primary-text">不使用key</span>
                <span class="secondary-text">默认模式，可能影响性能</span>
              </div>
            </div>
          </label>
        </nz-radio-group>
      </div>

      <div class="current-strategy">
        <div class="strategy-tag">
          <nz-tag [nzColor]="getStrategyTagType" nzMode="default">
            <i nz-icon [nzType]="getStrategyIcon" nzTheme="outline"></i>
            {{ getStrategyText(currentStrategy) }}
          </nz-tag>
        </div>
        <div class="strategy-description">
          {{ getStrategyDescription }}
        </div>
      </div>
    </div>
  </div>

  <div class="function-cards">

    <div class="function-card">
      <div class="card-header">
        <div class="card-icon">
          <i nz-icon nzType="read" [ngStyle]="{'color': 'white', 'fontSize': '1.75rem'}"></i>
        </div>
        <div class="header-content">
          <span class="tag">基础功能</span>
          <h3>图书管理</h3>
        </div>
      </div>
      <p class="card-desc">支持海量图书数据的高效管理，包括图书信息维护、库存跟踪、分类管理等功能。</p>
      <ul class="feature-list">
        <li><i nz-icon nzType="check-circle"></i> 图书信息维护</li>
        <li><i nz-icon nzType="check-circle"></i> 库存跟踪</li>
        <li><i nz-icon nzType="check-circle"></i> 分类管理</li>
      </ul>
    </div>


    <div class="function-card">
      <div class="card-header">
        <div class="card-icon">
          <i nz-icon nzType="shopping-cart" [ngStyle]="{'color': 'white', 'fontSize': '1.75rem'}"></i>
        </div>
        <div class="header-content">
          <span class="tag">电商功能</span>
          <h3>电商系统</h3>
        </div>
      </div>
      <p class="card-desc">完整的电商交易流程，支持在线下单、支付处理、订单跟踪、用户管理等。</p>
      <ul class="feature-list">
        <li><i nz-icon nzType="check-circle"></i> 在线下单</li>
        <li><i nz-icon nzType="check-circle"></i> 支付处理</li>
        <li><i nz-icon nzType="check-circle"></i> 订单跟踪</li>
      </ul>
    </div>


    <div class="function-card">
      <div class="card-header">
        <div class="card-icon">
          <i nz-icon nzType="cpu" [ngStyle]="{'color': 'white', 'fontSize': '1.75rem'}"></i>
        </div>
        <div class="header-content">
          <span class="tag">核心功能</span>
          <h3>系统核心</h3>
        </div>
      </div>
      <p class="card-desc">系统核心功能模块，提供强大的业务支持和数据处理能力。</p>
      <ul class="feature-list">
        <li><i nz-icon nzType="check-circle"></i> 数据处理</li>
        <li><i nz-icon nzType="check-circle"></i> 业务流程</li>
        <li><i nz-icon nzType="check-circle"></i> 系统集成</li>
      </ul>
    </div>

    <div class="function-card">
      <div class="card-header">
        <div class="card-icon">
          <i nz-icon nzType="monitor" [ngStyle]="{'color': 'white', 'fontSize': '1.75rem'}"></i>
        </div>
        <div class="header-content">
          <span class="tag">高级特性</span>
          <h3>性能优化</h3>
        </div>
      </div>
      <p class="card-desc">采用Vue.js最佳实践，支持多种Key绑定策略，确保大数据量场景下的流畅体验。</p>
      <ul class="feature-list">
        <li><i nz-icon nzType="check-circle"></i> Key策略优化</li>
        <li><i nz-icon nzType="check-circle"></i> 性能监控</li>
        <li><i nz-icon nzType="check-circle"></i> 大数据处理</li>
      </ul>
    </div>
  </div>

  <div class="book-section">
    <div class="section-header">
      <h2>热门图书</h2>
      <div class="section-actions">
        <button nz-button nzType="link" (click)="viewAll()">
          查看全部 <i nz-icon nzType="arrow-right"></i>
        </button>
      </div>
    </div>

    <div class="book-list">
      <div
        class="book-card"
        *ngFor="let book of popularBooks"
        (click)="viewBookDetail(book)"
      >
        <div class="book-cover">
          <img
            [src]="book.coverUrl || defaultCover"
            [alt]="book.title"
            (error)="handleImageError($event)"
          />
          <div class="book-hover">
            <button nz-button nzType="primary" nzShape="round" nzSize="small">
              查看详情
            </button>
          </div>
        </div>
        <div class="book-info">
          <h3>{{ book.title }}</h3>
          <div class="book-meta">
            <span class="book-author">{{ book.author }}</span>
            <span class="book-category">{{ book.category }}</span>
          </div>
          <div class="book-rating">
            <div class="stars">
              <i nz-icon nzType="star-fill" *ngFor="let n of getStarArray(book.rating)"></i>
              <i nz-icon nzType="star-half" *ngIf="book.rating % 1 >= 0.5"></i>
            </div>
            <span class="rating-value">{{ book.rating }}</span>
          </div>
          <div class="book-footer">
            <span class="book-price">¥{{ book.price }}</span>
            <span class="book-sales">销量 {{ book.sales }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>